import { useMemo, useRef, useState } from 'react';
import { useLocation } from 'react-router-dom';

import { Tabs } from 'antd';
import TabPane from 'antd/es/tabs/TabPane';

import { Icon } from '@iconify/react/dist/iconify.js';

// import { ExpandOutlined } from '@ant-design/icons';

const Page: React.FC = () => {
  const location = useLocation();
  console.log('location', location);
  const [activeKey, setActiveKey] = useState<string>('1');

  const arr = [
    {
      pathname: '/product/monitoring/pretreatment',
      children: [
        {
          name: '预处理 3D',
          url: 'http://10.20.7.100:11005/?Pro=洛碛餐厨污水平台&pageName=预处理工段'
        },
        {
          name: '预处理 PID',
          url: 'http://10.20.7.100:11005/?Pro=洛碛餐厨污水平台&pageName=PID_预处理工段'
        }
      ]
    },
    {
      pathname: '/product/monitoring/biochemicalsection',
      children: [
        {
          name: '生化 3D',
          url: 'http://10.20.7.100:11005/?Pro=洛碛餐厨污水平台&pageName=生化工段'
        },
        {
          name: '生化 PID',
          url: 'http://10.20.7.100:11005/?Pro=洛碛餐厨污水平台&pageName=PID_生化工段'
        }
      ]
    },
    {
      pathname: '/product/monitoring/fendun',
      children: [
        {
          name: '芬顿 3D',
          url: 'http://10.20.7.100:11005/?Pro=洛碛餐厨污水平台&pageName=芬顿工段'
        },
        {
          name: '芬顿 PID',
          url: 'http://10.20.7.100:11005/?Pro=洛碛餐厨污水平台&pageName=PID_芬顿工段'
        }
      ]
    },
    {
      pathname: '/product/monitoring/mbr',
      children: [
        {
          name: 'MBR 3D',
          url: 'http://10.20.7.100:11005/?Pro=洛碛餐厨污水平台&pageName=MBR工段'
        },
        {
          name: 'MBR PID',
          url: 'http://10.20.7.100:11005/?Pro=洛碛餐厨污水平台&pageName=PID_MBR工段'
        }
      ]
    },
    {
      pathname: '/product/monitoring/baf',
      children: [
        {
          name: 'BAF 3D',
          url: 'http://10.20.7.100:11005/?Pro=洛碛餐厨污水平台&pageName=BAF工段'
        },
        {
          name: 'BAF PID',
          url: 'http://10.20.7.100:11005/?Pro=洛碛餐厨污水平台&pageName=PID_BAF工段'
        }
      ]
    },
    {
      pathname: '/product/monitoring/dehydration',
      children: [
        {
          name: '脱水系统 3D',
          url: 'http://10.20.7.100:11005/?Pro=洛碛餐厨污水平台&pageName=脱水系统'
        },
        {
          name: '脱水系统 PID',
          url: 'http://10.20.7.100:11005/?Pro=洛碛餐厨污水平台&pageName=PID_脱水系统'
        }
      ]
    },
    {
      pathname: '/product/monitoring/deodorization',
      children: [
        {
          name: '除臭系统 3D',
          url: 'http://10.20.7.100:11005/?Pro=洛碛餐厨污水平台&pageName=除臭系统'
        },
        {
          name: '除臭系统 PID',
          url: 'http://10.20.7.100:11005/?Pro=洛碛餐厨污水平台&pageName=PID_除臭系统'
        }
      ]
    }
  ];

  const items = useMemo(() => {
    console.log(1);
    return arr
      ?.filter((item) => item?.pathname === location?.pathname)?.[0]
      ?.children?.map((item, index) => ({
        label: item?.name,
        url: `${item?.url}&access_token=${localStorage.getItem('token')}`,
        key: `${index + 1}`
      }));
  }, [location?.pathname]);

  // const url = useMemo(() => {
  //   const baseUrl = arr?.filter((item) => item?.pathname === location?.pathname)?.[0]?.children?.[
  //     Number(activeKey) - 1
  //   ]?.url;
  //   return `${baseUrl}&access_token=${localStorage.getItem('token')}`;
  // }, [activeKey, location?.pathname]);

  // console.log('url', url);

  const iframeRefA = useRef<HTMLIFrameElement>(null);
  const iframeRefB = useRef<HTMLIFrameElement>(null);
  const [fullScreen, setFullScreen] = useState(false);

  const handleFullScreen = (type: string) => () => {
    console.log('fullScreen:', fullScreen);
    setFullScreen(!fullScreen);

    //ifrome进入全屏模式
    if (iframeRefA.current && type === 'a') {
      iframeRefA.current.requestFullscreen();
    } else if (iframeRefB.current && type === 'b') {
      iframeRefB.current.requestFullscreen();
    }
  };
  const onChange = (key: string) => {
    setActiveKey(key);
  };

  return (
    <div style={{ width: '100%', height: '100%', position: 'relative' }}>
      <Tabs defaultActiveKey="1" onChange={onChange}>
        <TabPane tab={items?.[0]?.label} key="1">
          <div>
            <div
              style={{
                position: 'absolute',
                zIndex: 100,
                right: '10px',
                fontSize: '20px',
                cursor: 'pointer'
              }}
              onClick={handleFullScreen('a')}
            >
              <Icon style={{ color: '#f6ac2d' }} icon="ri:fullscreen-fill" />
            </div>
            <iframe
              src={items?.[Number(activeKey) - 1]?.url}
              width={'100%'}
              style={{ minHeight: '500px', height: 'calc(100vh - 260px)' }}
              ref={iframeRefA}
            ></iframe>
          </div>
        </TabPane>
        <TabPane tab={items?.[1]?.label} key="2">
          <div>
            <div
              style={{
                position: 'absolute',
                zIndex: 100,
                right: '10px',
                fontSize: '20px',
                cursor: 'pointer'
              }}
              onClick={handleFullScreen('b')}
            >
              <Icon style={{ color: '#f6ac2d' }} icon="ri:fullscreen-fill" />
            </div>
            <iframe
              src={items?.[Number(activeKey) - 1]?.url}
              width={'100%'}
              style={{ minHeight: '500px', height: 'calc(100vh - 260px)' }}
              ref={iframeRefB}
            ></iframe>
          </div>
        </TabPane>
      </Tabs>

      {/* <div
        style={{
          position: 'absolute',
          zIndex: 100,
          right: '10px',
          fontSize: '20px',
          cursor: 'pointer'
        }}
        onClick={handleFullScreen}
      >
        <Icon style={{ color: '#f6ac2d' }} icon="ri:fullscreen-fill" />2222
      </div>
      <iframe
        src={items![Number(activeKey) - 1]?.url}
        width={'100%'}
        style={{ minHeight: '500px' }}
        ref={iframeRef}
      ></iframe> */}
    </div>
  );
};

export default Page;
